import React, { useState } from 'react'
import './style.less'
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';
import Pagination from './Pagination'


// 自动播放
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);


export default function MySwiper ({ banners }) {
  const [index, setIndex] = useState(0);

  function handleChangeIndex (index) {
    setIndex(index)
  }

  return (
    <div id="swiper-box">
      <AutoPlaySwipeableViews index={index} onChangeIndex={handleChangeIndex}>
        {
          banners.map((ele, index) => {
            return (
              <div key={index}>
                <img src={ele.img} alt="" />
              </div>
            )
          })
        }
      </AutoPlaySwipeableViews>
      <Pagination banners={banners} currentIndex={index} />
    </div>
  )
}




